Post

Tutorial: Coding a Layout

So, you’ve designed your next site but you’re having a little trouble turning your lovely PSD into a coded layout. This tutorial should help you learn how to analyze either a new template, or even your current layout to find the best way to code it.


(_Click image for a larger version_)

Here is a basic design composition. The problem now becomes turning it into code while maintaining the style and structure that was decided upon as well as making sure that the site is accessible across browsers/platforms and is as light and elegant as possible.


(_Click image for a larger version_)

The first thing I do once I receive a finalized composition is attack it with a pencil. Analyze every detail of the layout and write down what you think will work. Begin by marking up the widths and basic structure of the site and then move to the details such as the typeface and font-size.

The full PNG of the layout above as well as the font used can be downloaded here
(_Note: You can remove the red markings by making the “Code Overlay” layer invisible._)

Now that we have a good idea of where we’re going, let’s get started.

The first task is to set up your files; luckily, Dreamweaver takes care of that part for me. I usually keep my CSS right in the header when I’m getting started so that I can set up the markup and styles side by side.

I’ve decided how I will be applying the drop shadow – a background on the body will be the easiest and won’t require any extra markup.

By applying the CSS for the background image as well as the “page” div, we now have the basic structure we’re looking for.


body {
        margin: 30px 0 0 0; padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        background: url(images/body_bg.png) center top no-repeat;
}
#page {
        width: 619px;
        margin: 0 auto;
        padding: 30px 40px;
        border: 1px solid #eee;
}

*Take a look at Step 1*

It is best to complete the structure of the layout before moving on to details such as the logo. Setting up the sidebar and main column before moving on makes it easier to locate and fix any problems.

With a few more CSS rules defining the sidebar, main column and footer, the layout is complete. The only step now is to fill in the details. 


#sidebar {
        width: 180px;
        padding: 0 20px 0 0;
        float: left;
}
#main_column {
        width: 390px;
        padding: 0 0 0 20px;
        float: left;
}
#footer {
        clear: left;
}

*Take a look at Step 2*

After adding the logo using the negative text-indent method (as well as an overflow: hidden to cut the Firefox dotted border short) and floating an unordered list to create the navigation, the coding is almost complete. Once the CSS has gotten to a point where it is no longer efficient to keep in the markup, move it to a separate stylesheet.

*Take a look at Step 3*

With a little more basic tweaking of colors and headline styles, the design is complete. It may seem like I skipped a great deal between steps 3 and 4, but all of the changes were simply modifying the default styles to match our design.

*Take a look at Step 4*

The most important thing to remember when coding a template is to follow the logical path of coding and testing the basic structure first and then moving to the details later.

The template, images and code are all free for your use and can be downloaded here. Good luck with your own work.

digg this story

Post Meta

At
06:13:00 PM
On
January 29
In
By
Tom Fadial

Comments

  1. Good article, nicely written I think I/others will easily be able to use this technique.

    stdmedia

    Jan 29, 06:31 PM #

  2. Great article. One suggestion though: I’d put “clear: both;” in the footer. For me, it’s force of habit, because then if you ever decide to float your columns to the right (to reverse the order of appearance on screen), you don’t need to change anything in your footer. It’s just a trivial point though. Good writeup.

    Nathan Smith

    Jan 29, 09:13 PM #

  3. Very nice and well thought out. We all have our own ways of coding layouts but they are all somewhat similar.

    Matt Jones

    Jan 29, 09:49 PM #

  4. Good article, these simple tutorials help me a lot!

    Bas Wit

    Jan 29, 11:28 PM #

  5. This was very helpfully for me.

    Rene

    Jan 30, 12:41 AM #

  6. Great Tutorial, I love it!
    Can you explain the “the negative text-indent method”?

    Conny Lo

    Jan 30, 02:05 AM #

  7. @Conny Lo

    This means that the text of the headline will be out of the visible area, in this case a width of 241px and a height: 37px.

    More information: http://phark.typepad.com/phark/2003/08/accessible_imag.html

    Rene

    Jan 30, 02:10 AM #

  8. thank you for this article!

    schnuck

    Jan 30, 05:28 AM #

  9. Very nice but toooo simple. How a about a system to see who to set up the images in photoshop. Like for one dont design with blender styles and transparency, or you will suffer,
    And how one goas about masking off area of imagery, or titleing texturesa for boxes of text that slide liquid style :D Now THAT would be a tutorial!

    tripdragon

    Jan 30, 06:32 AM #

  10. addendum: should the main_content not be 420px instead of the 220px as seen in the larger image?

    schnuck

    Jan 30, 06:38 AM #

  11. Good tutorial. Thanks!

    I am with Nathan regarding the clear: both; in the footer.

    James Mitchell

    Jan 30, 06:51 AM #

  12. Nathan & James: I usually don’t clear what is not necessary because it helps me remember how the layout is structured. clear: left tells me that I floated both columns to the left.

    Conny Lo: Rene answered your question right, but here is a live link to the Mike’s image replacement method.

    tripdragon: Maybe I’ll do that next :D

    schnuck: You got me, I’ll fix it as soon as I get a chance.

    Thame

    Jan 30, 07:04 AM #

  13. While the css is good, I don’t agree with the methodology you employ. Why begin immediately with css? Those just learning how to use css for positioning should first learn how to correctly code semantic html, the framework upon which css uses. It would be better to instruct people to create their html first, then create the css afterwards.

    Neil

    Jan 30, 08:54 AM #

  14. Isn’t naming your blocks “footer” the same as naming your styles “red_title”?

    I mean, the advice is to name the css classes independently of its style. You shouldn’t use “red_title” even if it’s for your h1 with color:red.

    Naming a block “footer” implies that we’re going to show it below everything else, and it’s the same mistake as a “red_title” class, but for layouts.

    I think it’s better to describe the block content instead of its position.

    Julio Nobrega

    Jan 30, 10:01 AM #

  15. Thes is very helpful, I’m just getting started with CSS. Perhaps I missed something, but it seems to me that the width values in Step 1 aren’t matching up with what is written in red on the layout. Is this because you’re compensating for something the browser does or was it just an executive design decision you made when coding it?

    Dustin Brown

    Jan 30, 10:19 AM #

  16. Where did you ever you get the idea to call a handful of screenshots and lines of text a tutorial….

    Carl

    Jan 30, 11:56 AM #

  17. Julio: I don’t think that’s the same mistake. Location on-screen doesn’t fluctuate nearly as much as color schemes. Besides, even the CSS legends like SimpleBits.com use div id="footer". Fact of the matter is, you have to name it something, so it might as well be easy to remember.

    Nathan Smith

    Jan 30, 01:04 PM #

  18. Naming it footer is the same as naming the header ‘header’. The name ‘header’ implies that it sits at the head of the page.

    Tony

    Jan 30, 01:20 PM #

  19. O man, going from PSD to CSS is always the hardest part for me. I dread doing it, but this is a good tutorial for making the leap. Thanks!

    Matthew Price

    Jan 30, 02:20 PM #

  20. -Sweet tutorial. This is exactly the way I’ve been doing mine, and it just makes everything so clear in my head.
    -Neil, I think the assumption here is that the coder knows semantic markup already.

    supa

    Jan 30, 05:47 PM #

  21. I disagree with a couple of comments here…

    1. CSS is just as important as HTML if not more so these days, you really shouldn’t have one without the other so learning fundamentals of HTML BEFORE CSS is not a good idea… they should be learnt together.

    2. Header, Footer etc are all standard type ids for these sections and even if you remove the CSS they should, ideally, still appear in that order so the naming of these sections as such is not the same as calling a tag red_title.

    All in it’s not a bad tut at all. It’s good to see people giving back as this does.

    Tyroga

    Jan 30, 06:03 PM #

  22. Thanks! I’m going to make something like this for my site. thanks a lot.
    -jRad

    Jrad

    Jan 30, 07:47 PM #

  23. @Rene, @Thame -> Thank you, again more stuff to look for, CSS is endless!

    Conny Lo

    Feb 1, 12:00 PM #

  24. Very good!
    But just a correction: after adding full size I don’t have 700px but 690px !!
    Maybe I’m wrong.

    Thanks!

    MsrFR

    Feb 2, 02:13 AM #

  25. Back to re-comment on the CSS naming.

    The CSS is promise is to separate content from layout. The same argument that people do about red_title applies to footer. Don’t tie the CSS class names to the presentation.

    You will only “get” this when the menu has to be moved from the top to the right side of the viewport. Or when the company info, currently at the bottom of the page, has to be eliminated completely because your page is going to be displayed on a cellphone.

    Also, skinning a web page, with different CSS files depending on user preferences, for example, drive us to the same red_title problem. When your alternative layout involves re-positioning of elements, the “footer” and “header” class names don’t have the same meaning.

    It’s not a huge problem, if a problem at all for most people. But I see a double standard here, and a tutorial which tell us about the good things of CSS should also teach that CSS can change layouts easily. And if CSS can decouple content from presentation/position, why make the same color/size mistake?

    What others do, even gurus or successfull people, really doesn’t matter. Everyone makes mistakes, and I see this as one. I have my own share of guilty, I’ve used “header” and “footer” too. I just think that it’s better not to use these names, and nowadays I try to avoid them.

    It’s just better practice, you know? :)

    Julio Nobrega

    Feb 2, 05:22 AM #

  26. “as well as an overflow: hidden to cut the Firefox dotted border short)”...in step 3

    owerflow works fine.. but dotted border is still there… to fix that you shoul ad => outline: none;

    Mihael

    Feb 6, 03:34 AM #

  27. Mihael: I actually like the dotted border so I try to keep it there. The only problem I have with it is when it extends past the container’s dimensions.

    Thame

    Feb 6, 04:19 AM #

  28. I don’t really understand :(

    Phyllis

    Feb 23, 07:44 PM #

  29. If there is any particular region that is troubling you, feel free to contact me or drop another comment to see if I can help you out.

    Otherwise, I will be writing a more in-depth article as soon as I have more time.

    Thame

    Feb 24, 12:30 PM #

  30. Great tutorial.Thanks for taking the time to write this up Thame.Keep it coming .

    Best Ghana Website Designers

    Jun 24, 09:17 AM #

  31. Check out Doug Bowman’s presentation about common structure http://webstock.org.nz/recordings.php. He talks about headers and footers and naming convensions for web page patterns etc. In my opinion there are structural names and functional names…these are not presentational names. So #sidebar to me does not necessarily mean that it is on the side…it has a meaning of related, secondary, or additional.

    bart

    Aug 3, 04:08 PM #

  32. It’s good for people who have had some experience. Being a first timer I hardly understood any of it.

    Rhys

    Sep 3, 12:58 AM #

  33. Great Tutorial, I love it!
    Can you explain the “the negative text-indent method”?

    Andy

    Nov 15, 03:36 PM #

  34. Great, Author!

    Danila

    Dec 3, 03:14 PM #

  35. it is simple but some not how can i convert psd file to html
    <a href=“http://www.cicekclub.com” title=“çiçek”>çiçek siparişi</a>

    cicekclub

    Jan 24, 05:17 AM #

  36. Great, great and great, this tutorial have save my life. i just can say “I love u” thanks for this great tutorial, hope u never stop making the kind of great resources

    Adnhack

    Apr 22, 04:32 PM #

  37. Well first of all thank you for a great tutorial…
    Mainly not overwhelming people with details…
    That was a big problem with others I’ve looked at.
    ...It brought some things to light for me.

    Actually I’m impressed with the whole thing and not just for the tute… its a box model in its finest… “Indented” execution

    You do one thing then move on to the next…
    Brilliance is in the simplicity…

    Still I strugle with replacing images though. Any wisdom on that, really hate to dirty it all up with that ugly TABLE tag {teeth screeching sound}.

    zerofirefox

    Sep 7, 12:06 PM #

  38. Tracked back to from here: http://www.presidiacreative.com/the-most-helpful-psd-to-xhtml-and-css-tutorials/

    Eric Shafer

    Dec 11, 07:16 PM #

  39. may i download png and other files? links are dead

    spuri

    Mar 26, 03:38 PM #

  40. Nice article.Very informative.

    graphics cloud

    Mar 26, 10:04 PM #

  41. Hi,
    I am very glad that I find out your site on internet. It’s a nice post indeep, but I have a question about the background image. I download a small image which i like it very much, and i want to set it as my web site background image, but it’s just a small image, i can’t make is as lager is the web site(hight and width).

    for example, I copy your code and download the above background image from this page, the result is the image just display on middle of the web site.

    So my question is : should I draw a image as large as my web site, or there is another way to do it, please let me know.
    wait for your anser.Thanks

    chrystal

    May 26, 01:55 PM #

  42. I’m totally confused, as I have yet to see anyone using CSS2 to design templates.

    For example in this tutorial it isn;t used nor on this website..

    Can anyone explain why no-one is using CSS2 like left: 20px right:20px etc for positioning of everything on their site?

    Markey

    Jun 23, 04:36 PM #

  43. The links to the tutorial steps seem to be broken at the moment.

    You can find them on the wayback machine here..

    Darren

    Oct 12, 01:48 AM #

  44. The background image has the shadow effect or did you add it using CSS? I know really a beginner questions, i am learning. :)

    Vishal

    Jan 24, 07:39 AM #

Add a Comment

Phrase modifiers:

_emphasis_
*strong*
__italic__
**bold**
??citation??
-deleted text-
@code@

Block modifiers:

bq. Blockquote
p. Paragraph

Links:

"linktext":http://example.com

Archive

Show Articles By:

You can show articles by time or category.

  • 260.

    The Ethics of Practicing Procedures on the Nearly Dead

    The report from the field was not promising by any stretch, extensive trauma, and perhaps most importantly unknown “downtime” (referencing the period where the patient received no basic care like...

    Read More

  • 260.

    The Ethics of Teaching Hospitals

    I can’t imagine what the patient was thinking. Seeing my trembling hands approaching the lacerations on his face with a sharp needle. I tried to reassure him that I knew what I was doing, but the...

    Read More

  • 260.

    Conscious Conversation: Behavioral Science

    Dr. Eran Zaidel is a professor of Behavioral Neuroscience and faculty member at the Brain Research Institute at UCLA. His work focuses on hemispheric specialization and interhemispheric interaction...

    Read More

  • 260.

    Progress Report

    Two years down, I’m still going. The next two years are my clinical rotations, the actual hands-on training. It’s a scary prospect, responsibilities and such; but it’s equally exciting, after...

    Read More

  • 260.

    Why Medical School Should Be Free

    There’s a lot of really great doctors out there, but unfortunately, there’s also some bad ones. That’s a problem we don’t need to have, and I think it’s caused by some problems with the...

    Read More

  • 260.

    The Cerebellum: a model for learning in the brain

    I know, it’s been a while. Busy is no excuse though, as it is becoming clear that writing for erraticwisdom was an important part of exercising certain parts of my brain that I have neglected...

    Read More

  • 260.

    Conscious Conversation: Philosophy

    Daniel Black, author of Erectlocution, was kind enough to chat with me one day and we had a great discussion – have a listen.

    Read More

  • 260.

    The Stuff in Between

    I’m actually almost normal when not agonizing over robot production details, and quite a bit has happened since I last wrote an update. First, I’ve finally graduated. I had a bit of a...

    Read More